{% if settings.show_grid %}  
  <button class="niceButton d-none d-sm-block" onclick="myFunction()">Grid PC</button>
  <button class="niceButton d-sm-none d-block" onclick="myFunction()">Grid Mob</button>
{% endif %}

<div class="grid-v d-none">
  <div class="container h-100">
    <div class="row grid-row h-100">
      <div class="col"><div class="grid-column"></div></div>
      <div class="col"><div class="grid-column"></div></div>
      <div class="col"><div class="grid-column"></div></div>
      <div class="col"><div class="grid-column"></div></div>
      <div class="col"><div class="grid-column"></div></div>
      <div class="col"><div class="grid-column"></div></div>
      <div class="col"><div class="grid-column"></div></div>
      <div class="col"><div class="grid-column"></div></div>
      <div class="col"><div class="grid-column"></div></div>
      <div class="col"><div class="grid-column"></div></div>
      <div class="col"><div class="grid-column"></div></div>
      <div class="col"><div class="grid-column"></div></div>
    </div>
  </div>
</div>
<script>
function myFunction() {
   var element = document.documentElement;
   element.classList.toggle("grid");
   document.querySelector('.grid-v').classList.toggle('d-none')
}
</script>
<style>

 .grid{
   position: relative;
 }
.grid::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    background-image: linear-gradient(rgb(224 160 160 / 31%) 0px, #afadad26 0px);
    background-size: 1px 4px;
    background-position: 0px 0px;
    pointer-events: none;
    z-index: 10000;
}
.grid-v{
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 10000;
}

.niceButton {
	padding: 16px 24px;
	border-radius: 6px;
	border: none;
	margin-top:16px;
	width: 100px;
	font-size: 18px;
	cursor: pointer;
  position: fixed;
  z-index: 20000;
  right: 0;
  top: 40%;
}
.grid-row .col {
  height: 100%;
  background-color: rgb(239 51 51 / 26%);
}
.grid-row .col .grid-column {
  height: 100%;
  background-color: rgb(212 49 49 / 25%);
}

</style>